<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .calendar{
        position: relative;
        cursor: pointer;
    }
    .calendar-wrap{
        position: absolute;
        width: 280px;
        height: 280px;
            box-shadow: 1px 1px 20px #607d8b7d;
        border-radius: 10px;
        background-image: linear-gradient(#2e3979,#252e58,#161f54);
        color: #563c33;
    }
    .current-date-wrap{
            width: 100%;
        padding-left: 70px;
        margin: 0 auto;
        height: 30px;
        text-align: center;
        color: #a0a048;
        text-shadow: 1px 1px 10px #928d5e;
    }
    .current-date-wrap div{
        float: left;
        line-height: 30px;
    }
    .current-date-wrap div:nth-child(1){
            width: 40px;
    }
    .current-date-wrap div:nth-child(2){
            width: 15px;
    }
    .current-date-wrap div:nth-child(3){
            width: 25px;
    }
    .current-date-wrap div:nth-child(4){
            width: 55px;
    }
    .calendar-wrap .calendar-header-control-wrap{
        width: inherit;
        height: 40px;
        cursor: pointer;
    }
    .calendar-wrap .calendar-header-control-wrap div{
        float: left;
        width: 70px;
        height: inherit;
        font-size: 12px;
        line-height: 40px;
        text-align: center;
            box-shadow: inset 1px 1px 500px #050715;
        background-color: lemonchiffon;
        transition: all 0.5s ease;
        color: #c5c570;
    }
    .current-date-wrap .calendar-close-btn{
            margin-left: 45px;
            width: 30px;
            height: 30px;
            background-color: #5a6492;
            line-height: 31px;
            color: wheat;
            /* border-radius: 10px; */
            font-size: 15px;
            clip-path: polygon(0 0,80% 0,100% 20%,100% 100%,0 100%);
            cursor: pointer;
            transition: all 0.5s ease;
    }
    .current-date-wrap .calendar-close-btn:hover{
        background-color: #242d63;
        color: #c5b364;
    }
    .calendar-wrap .calendar-header-control-wrap div:hover{
        background-color: #d8d892;
    }
    .calendar-wrap .calendar-header-desc-wrap{
        width: inherit;
        height: 30px;
        border-bottom: 1px solid #5e6149;
        cursor: pointer;
        color: lightgrey;
    }
    .calendar-wrap .calendar-header-desc-wrap div{
        float: left;
        width: 40px;
        height: inherit;
        border-right: 1px solid #5e6149;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        cursor: default;
    }
    .calendar-wrap .calendar-header-desc-wrap div:nth-child(7){
        border-right: 0px solid yellow;
    }
    .curr-month-details{
        position: relative;
        width: inherit;
        height:180px;
    }
    .curr-month-details span{
        position: absolute;
        display: inline-block;
        width: 40px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        transition: all 0.5s ease;
            color: #94947d;
    }
    .curr-month-details span:hover{
        background: #009688;
            border-radius: 10px;
    box-shadow: 1px 1px 10px #053e38;
    font-weight: 700;
    color: wheat;
    }
</style>
    <title>Document</title>
</head>
<body>
    <span id="calendar" class="calendar">请选择日期</span><span id="curr-time"></span>
    <span id="calendar2" class="calendar">请选择日期</span><span id="curr-time2"></span>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
    

    <script type = "text/javascript" >
       var page={
            cursorObj:null,
            objParent:null,
            calendarWrap:null,
            date:null,
            // currTime:null,
            currYear:null,
            currMonth:null,
            currDate:null,
            currDay:null,
            nextMonthBtn:null,
            preMonthBtn:null,
            nextYearBtn:null,
            preYearBtn:null,
            closeCalendarBtn:null,
            flag:false,
            init:function (para1) {
                var _this=this;
                        document.getElementById(para1).addEventListener('click',function(){
                           if(_this.flag==false){
                                 _this.cursorObj=document.getElementById(para1);
                                _this.objParent=_this.cursorObj.parentNode;
                                _this.addEvent();
                           }
                        });
            },
            addEvent:function(){
                this.flag=true;
                var _this=this;
                    console.log(_this.cursorObj);
                    _this.renderHTML();
            },
            renderHTML:function(){
                
                var _this=this;
                this.calendarWrap=document.createElement('div');
                this.date=new Date();
                this.calendarWrap.innerHTML='<div class="current-date-wrap">'+
                    '<div class="current-date-year">'+this.date.getFullYear()+'/</div>'+
                    '<div class="current-date-month">'+(this.date.getMonth()+1)+'/</div>'+
                    '<div class="current-date-date">'+this.date.getDate()+'/</div>'+
                     '<div class="current-date-day">'+this.switchDay(this.date.getDay())+'</div>'+
                     '<div class="calendar-close-btn glyphicon glyphicon-remove"></div>'+
                    '</div>'+
                    '<div class="calendar-header-control-wrap">'+
                    '<div class="calendar-btn calendar-pre-year-btn glyphicon glyphicon-triangle-left"></div>'+
                    '<div class="calendar-btn calendar-pre-month-btn glyphicon glyphicon-menu-left"></div>'+
                    '<div class="calendar-btn calendar-next-month-btn glyphicon glyphicon-menu-right"></div>'+
                    '<div class="calendar-btn calendar-next-year-btn glyphicon glyphicon-triangle-right"></div>'+
                    '</div>'+
                    '<div class="calendar-header-desc-wrap">'+
                    '<div class="calendar-btn calendar-header-desc-btn">日</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">一</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">二</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">三</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">四</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">五</div>'+
                    '<div class="calendar-btn calendar-header-desc-btn">六</div>'+
                '</div>';
                this.calendarWrap.className="calendar-wrap";
                this.objParent.appendChild(this.calendarWrap);
                //渲染完毕，获取DOM
                this.nextMonthBtn=document.getElementsByClassName("calendar-next-month-btn")[0];
                this.preMonthBtn=document.getElementsByClassName("calendar-pre-month-btn")[0];
                this.nextYearBtn=document.getElementsByClassName("calendar-next-year-btn")[0];
                this.preYearBtn=document.getElementsByClassName("calendar-pre-year-btn")[0];
                this.closeCalendarBtn=document.getElementsByClassName("calendar-close-btn")[0];
                //给按钮添加事件
                this.nextYearBtn.addEventListener('click',function(){
                    _this.nextYear();
                });
                this.nextMonthBtn.addEventListener('click',function(){
                    _this.nextMonth();
                });
                this.preYearBtn.addEventListener('click',function(){
                    _this.preYear();
                });
                this.preMonthBtn.addEventListener('click',function(){
                    _this.preMonth();
                });
                this.closeCalendarBtn.addEventListener('click',function(){
                    _this.closeCalendar();
                });
                this.currYear=document.getElementsByClassName("current-date-year")[0];
                this.currMonth=document.getElementsByClassName("current-date-month")[0];
                this.currDate=document.getElementsByClassName("current-date-date")[0];
                this.currDay=document.getElementsByClassName("current-date-day")[0];

                this.cursorObj.innerHTML=this.currYear.innerHTML+this.currMonth.innerHTML+this.currDate.innerHTML+this.currDay.innerHTML;
                //获取每个月最大天数,
                // this.date.setMonth(this.date.getMonth()+1);
                // this.date.setDate(0);
                this.date.setMonth(this.date.getMonth()+1);
                this.date.setDate(0);
                this.renderCalendar();
            },
            closeCalendar:function(){
                if(document.getElementsByClassName("calendar-wrap")[0]){
                    this.flag=false;
                    document.getElementsByClassName("calendar-wrap")[0].parentNode.removeChild(document.getElementsByClassName("calendar-wrap")[0]);
                }
            },
            nextYear:function(){
                // alert('当前年：---'+this.date.getFullYear());

                this.date.setFullYear(this.date.getFullYear()+1);
                // this.setDate(1);
                this.date.setMonth(0);
                this.date.setDate(1);
                this.date.setMonth(this.date.getMonth()+1);
                this.date.setDate(0);
                    // console.log('设置后年--month：---'+this.date.getMonth());
                    
                    // console.log('设置date后：---'+this.date.getDate());
                this.renderCalendar();
            },
            nextMonth:function(){
                //默认显示当前月第一天
                if(this.date.getMonth()+1<12){
                    console.log('当前月：---'+this.date.getMonth());
                    this.date.setMonth(this.date.getMonth()+2);
                    this.date.setDate(0);
                    console.log('设置后月：---'+this.date.getMonth());
                    this.renderCalendar();
                }
            },
            preYear:function(){
                if(this.date.getFullYear()-1>0){
                    console.log('设置后前：---'+this.date.getFullYear());

                    this.date.setFullYear(this.date.getFullYear()-1);
                    console.log('设置后年：---'+this.date.getFullYear());
                    this.date.setMonth(0);
                    this.date.setDate(1);
                    this.date.setMonth(this.date.getMonth()+1);
                    this.date.setDate(0);
                    this.renderCalendar();
                }
            },
            preMonth:function(){
                //默认显示当前月第一天
                if(this.date.getMonth()>0){
                    console.log('当前月：---'+this.date.getMonth());
                    this.date.setMonth(this.date.getMonth());
                    this.date.setDate(0);
                    console.log('设置后月：---'+this.date.getMonth());
                    this.renderCalendar();
                }
            },
            renderCalendar:function(){
                // this.date.setMonth(this.date.getMonth()+1);
                // this.date.setDate(0);
                console.log('设置后年--month：---'+this.date.getMonth());
                console.log('设置date后：---'+this.date.getDate());
                var _this=this;
                var preDetails=document.getElementsByClassName("curr-month-details")[0];
                if(preDetails){
                    this.calendarWrap.removeChild(preDetails);
                }
                var maxDate=this.date.getDate();  
                //默认显示当前月的天数
                console.log('maxdate：---'+maxDate);
                var details=document.createElement('div');
                var row=0;
                details.className="curr-month-details";
                details.innerHTML='';
                for(let i=1;i<=maxDate;i++){
                    var detail=document.createElement('span');
                    detail.innerHTML=i;
                    detail.addEventListener('click',function(){
                        _this.choseDate(i);

                    });
                    // this.date.setMonth(this.date.getMonth()+1);
                    this.date.setDate(i);
                    // console.log(this.date.getDay());
                    switch(this.date.getDay()){
                        case 0:{
                            row+=1;
                            detail.style.marginLeft=0+'px';
                            break;
                        }
                        case 1:{
                            detail.style.marginLeft=40+'px';
                            break;
                        }
                        case 2:{
                            detail.style.marginLeft=80+'px';
                            break;
                        }
                        case 3:{
                            detail.style.marginLeft=120+'px';
                            break;
                        }
                        case 4:{
                            detail.style.marginLeft=160+'px';
                            break;
                        }
                        case 5:{
                            detail.style.marginLeft=200+'px';
                            break;
                        }
                        case 6:{
                            detail.style.marginLeft=240+'px';
                            break;
                        }
                    }
                    if(i==1&&this.date.getDay()==0){
                        details.style.transform="translateY(-30px)";
                    }
                    detail.style.marginTop=row*30+'px';
                    details.appendChild(detail);
                }
                var curryear=new Date().getFullYear();
                var currmonth=new Date().getMonth();
                var currdate=new Date().getDate();

                if(this.date.getFullYear()===curryear &&this.date.getMonth()===currmonth){
                    console.log("当前时间");
                    this.currMonth.innerHTML=(this.date.getMonth()+1)+'/';
                    this.currDate.innerHTML=new Date().getDate();
                    this.currDay.innerHTML=this.switchDay(new Date().getDay());
                    this.cursorObj.innerHTML=this.currYear.innerHTML+this.currMonth.innerHTML+this.currDate.innerHTML+this.currDay.innerHTML;
                }else{
                    console.log("不是当前时间");

                    // this.calendarWrap.appendChild(details);
                    this.currYear.innerHTML=(this.date.getFullYear())+'/';

                    this.currMonth.innerHTML=(this.date.getMonth()+1)+'/';
                    this.currDate.innerHTML=this.date.getDate();
                    this.currDay.innerHTML=this.switchDay(this.date.getDay());
                    this.cursorObj.innerHTML=this.currYear.innerHTML+this.currMonth.innerHTML+this.currDate.innerHTML+this.switchDay(this.date.getDay());
                }
                this.calendarWrap.appendChild(details);
            },
            choseDate:function(para){
                console.log(para);
                this.date.setDate(para);
                var day=this.switchDay(this.date.getDay());
                this.currDate.innerHTML=para;
                this.currDay.innerHTML=day;
                console.log(this.currDay.innerHTML);
                this.cursorObj.innerHTML=this.currYear.innerHTML+this.currMonth.innerHTML+para+day;
                // this.cursorObj=null;
                // this.currTime=null;
            },
            switchDay:function(para){
                switch(para){
                    case 0: {return '星期日';break;}
                    case 1: {return '星期一';break;}
                    case 2: {return '星期二';break;}
                    case 3: {return '星期三';break;}
                    case 4: {return '星期四';break;}
                    case 5: {return '星期五';break;}
                    case 6: {return '星期六';break;}
                }
            },
        }
        page.init('calendar');
        page.init('calendar2');

    </script>
</html>
